<template>
	<view class="write-container">
		<form @submit="formSubmit" @reset="formReset">
			<view class="write-item">
				<text>金额:</text>
				<input type="digit" inputmode="decimal" v-model="pay" @input="onKeyPay" placeholder="添加金额" />
			</view>
			<view class="write-item">
				<text>类型:</text>
				<uni-data-picker :localdata="dataTree" v-model="type_desc" @change="onchange"></uni-data-picker>

			</view>
			<view class="write-item">
				<text>备注:</text>
				<input type="text" @input="onKeyInput" placeholder="添加备注" v-model="mark" />
			</view>
			<view class="write-item">
				<text>当前时间: {{currentDateTime}} </text>
			</view>
			<view>
				<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeTime" />
			</view>
			<view class="write-primary">
				<button type="primary" form-type="submit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pay: '',
				type: 0,
				mark: '',
				currentDateTime: this.formatDateTime(new Date()),
				datetimesingle: '',
				dataTree: [{ //备注：一级菜单中的value与二级菜单中的value不能重复
						text: "收入",
						value: "0",
						children: [{
								text: "薪资",
								value: "20"
							},
							{
								text: "理财",
								value: "21"
							},
							{
								text: "红包",
								value: "22"
							},
							{
								text: "借入",
								value: "23"
							},
							{
								text: "收债",
								value: "24"
							},
							{
								text: "其他",
								value: "25"
							}
						]
					},
					{
						text: "支出",
						value: "1",
						children: [{
								text: "消费",
								value: "26"
							},
							{
								text: "餐饮",
								value: "2"
							},
							{
								text: "购物",
								value: "3"
							},
							{
								text: "住房",
								value: "4"
							},
							{
								text: "交通",
								value: "5"
							},
							{
								text: "通讯",
								value: "6"
							},
							{
								text: "娱乐",
								value: "7"
							},
							{
								text: "医疗",
								value: "8"
							},
							{
								text: "教育",
								value: "9"
							},
							{
								text: "红包",
								value: "10"
							},
							{
								text: "旅行",
								value: "11"
							},
							{
								text: "投资",
								value: "12"
							},
							{
								text: "借出",
								value: "13"
							},
							{
								text: "还债",
								value: "14"
							},
							{
								text: "美容",
								value: "15"
							},
							{
								text: "亲子",
								value: "16"
							},
							{
								text: "人情社交",
								value: "17"
							},
							{
								text: "宠物",
								value: "18"
							},
							{
								text: "其他",
								value: "19"
							}
						]
					}
				],
				type_desc: ''
			};
		},
		watch: {
			datetimesingle(newval) {
				console.log('单选:', this.datetimesingle);
			},
		},
		mounted() {
			setTimeout(() => {
				this.datetimesingle = Date.now() - 2 * 24 * 3600 * 1000
			}, 3000)
		},
		methods: {
			formatDateTime(date) {
				let year = date.getFullYear();
				let month = this.padStart(date.getMonth() + 1); // 月份是从0开始的
				let day = this.padStart(date.getDate());
				let hours = this.padStart(date.getHours());
				let minutes = this.padStart(date.getMinutes());
				let seconds = this.padStart(date.getSeconds());
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			changeTime(e) {
				this.datetimesingle = e
				if (e !== '') {
					const currentDateTimeStamp = Date.parse(this.currentDateTime)
					const datetimesingleStamp = Date.parse(this.datetimesingle)
					//如果选择的时间比当前时间小
					if (currentDateTimeStamp > datetimesingleStamp) {
						this.currentDateTime = this.datetimesingle
					}
				}
			},
			padStart(value) {
				return value.toString().padStart(2, '0');
			},
			//备注
			onKeyInput(event) {
				this.mark = event.detail.value
				console.log(this.mark)
			},
			//金额
			onKeyPay(event) {
				this.pay = event.detail.value
			},
			async formSubmit(e) {
				if (this.pay <= 0 || this.pay == '') {
					uni.$showMsg('金额不能为空')
					return
				}
				if (this.type_desc == '') {
					uni.$showMsg('类型不能为空')
					return
				}
				uniCloud.callFunction({
					name: "BillAdd",
					data: {
						"pay": this.pay,
						"type": this.type,
						"type_desc": this.type_desc,
						"mark": this.mark,
						"createTime": this.currentDateTime
					}
				}).then(res => {
					this.pay = ''
					this.type = '',
						this.type_desc = ''
					this.mark = ''
					uni.switchTab({
						url: '/pages/bill/bill'
					})
				}).catch(err => {
					uni.$showMsg(err)
				});
			},
			formReset(e) {
				this.datetimesingle = ''
				this.type_desc = ''
			},
			onchange(e) {
				this.type = e.detail.value[0].value
				this.type_desc = e.detail.value[0].text + '-' + e.detail.value[1].text
			}
		}
	}
</script>
<style lang="scss">
	.write-container {
		margin-left: 10px;
		margin-right: 10px;

		.write-item {
			line-height: 40px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: left;

			text {
				padding-right: 15px;
			}
		}

		.write-primary {
			// display: flex;
			// flex-direction: row;
			margin: 10px 0 0 0;
		}
	}
</style>